<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托_引入</title>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li>1111111</li>
			<li>111111111</li>
			<li>11111111111</li>
		</ul>
		<li>22222</li>
		<br/>
		<button id="btn">添加新的li</button>
		
		<!-- 绑定事件监听的问题:新添加的元素没有监听 -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 1.点击li背景就会变为红色
			// 2.点击btn1就添加一个li
			
			$('ul>li').click(function(){
				this.style.background = 'red'
			})
			
			$('#btn').click(function(){
				$('ul').append('<li>新增的li...</li>')
			})
		</script>
	</body>
</html>
